<template>
    <div class="addMember">
        <div class="topNav">
            <el-divider class="topLine"><i class="lineIcon el-icon-document-copy"></i><span
                    class="lineTitle" id="optionMember">新建会员管理表</span></el-divider>
        </div>
        <div class="memberSetNav">
        </div>
        <div class="addContent">
            <!--开启表单验证：:rules="rules" ref="moudle" 表单右侧验证符号 status-icon -->
            <el-form :model="member" status-icon :rules="rules" label-width="100px" ref="member"
                     :label-position="labelPosition">

                <el-form-item label="姓名" prop="name">
                    <el-input id="name" class="inputLine" v-model="member.name"></el-input>
                </el-form-item>

                <el-form-item label="昵称" prop="nickName">
                    <el-input id="nickName" class="inputLine" v-model="member.nickName"></el-input>
                </el-form-item>
                <el-form-item label="座右铭" prop="motto">
                    <el-input id="motto" type="textarea" :rows="3" class="inputLine" v-model="member.motto"></el-input>
                </el-form-item>
                <el-form-item class="upload-icon-area" label="头像" prop="icon">
                    <big-file :upload-tile="'上传头像'" :input-id="'upload-icon'" :suffix-type="['jpg','jpeg','png','gif']"
                              :uniId="member.uniId" :use-type="SOURCE_USE_TYPE.SOURCE_IUSE.key"
                              :after-upload="afterUpload"></big-file>
                    <el-row class="upload-icon">
                        <el-col :span="2">
                            <div v-if="member.icon" class="upload-icon-box">
                                <img :src="member.icon" class="img-responsive"/>
                            </div>

                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item label="手机号" prop="mobile">
                    <el-input id="mobile" class="inputLine" v-model="member.mobile"></el-input>
                </el-form-item>

                <el-form-item label="邮箱" prop="email">
                    <el-input id="email" class="inputLine" v-model="member.email"></el-input>
                </el-form-item>

                <el-form-item label="微信二维码" prop="wechatCode">
                    <big-file :upload-tile="'上传二维码'" :input-id="'upload-qrImg'" class="uploadQrImg"
                              :suffix-type="['jpg','jpeg','png','gif']"
                              :uniId="member.uniId" :use-type="SOURCE_USE_TYPE.SOURCE_IUSE.key"
                              :after-upload="afterQrImgUpload"></big-file>
                    <el-row class="upload-qrcode-icon">
                        <span class="logoDesc">建议尺寸：300*300px</span>
                        <el-col :span="6" v-if="member.wechatCode">
                            <div class="upload-icon-box">
                                <img class="img-responsive" :src="member.wechatCode"/>
                            </div>
                        </el-col>
                    </el-row>

                </el-form-item>
                <el-form-item label="密码" prop="password" v-show="!member.uniId">
                    <el-input id="password" class="inputLine" v-model="member.password"></el-input>
                </el-form-item>

                <el-form-item label="身份证图片" prop="identityCard">
                    <big-file :upload-tile="'上传身份证'" :input-id="'upload-module-icon'"
                              :suffix-type="['jpg','jpeg','png','gif']"
                              :uniId="member.uniId" :use-type="SOURCE_USE_TYPE.SOURCE_PUBLIC.key"
                              :after-upload="afterIDUpload"></big-file>
                </el-form-item>

                <el-row class="upload-file-list" v-if="files.length>0">
                    <el-col :span="20">
                        <div class="file-image" v-for="file in files" :key="file.index">
                            <el-image class="img-url"
                                      :src="file"
                                      :preview-src-list="files"
                            >
                            </el-image>
                            <div class="img-after">
                                <!--<span class="glyphicon glyphicon-trash"></span>
                                <p>刪除</p>-->
                                <el-button class="img-del" type="danger" icon="glyphicon glyphicon-trash"
                                           @click="removeIDImg(file)"></el-button>
                            </div>

                        </div>
                    </el-col>
                </el-row>
                <el-form-item label="身份证号" prop="identityNum">
                    <el-input id="identityNum" class="inputLine" v-model="member.identityNum"></el-input>
                </el-form-item>

                <el-form-item label="所在省市" prop="address">
                    <el-cascader class="categoryInput inputOptionLine" ref="addressInput"
                                 placeholder="输入内容搜索分类"
                                 v-model="add"
                                 :options="address"
                                 :props="{value:'id',label:'areaname',children:'children'}"
                                 separator=" / "
                                 @change="addressChange">
                    </el-cascader>
                </el-form-item>

                <el-form-item label="绑定银行卡" prop="bankCard">
                    <big-file :upload-tile="'上传银行卡正面'" :input-id="'upload-bankCard'" class="uploadQrImg"
                              :suffix-type="['jpg','jpeg','png','gif']"
                              :uniId="member.uniId" :use-type="SOURCE_USE_TYPE.SOURCE_IUSE.key"
                              :after-upload="afterbankCardUpload"></big-file>
                    <el-row class="upload-qrcode-icon">
                        <el-col :span="12" v-if="member.bankCard">
                            <div class="upload-icon-box">
                                <img class="img-responsive" :src="member.bankCard"/>
                            </div>
                        </el-col>
                    </el-row>

                </el-form-item>
                <el-form-item label="银行卡号" prop="bankNum">
                    <el-input id="bankNum" class="inputLine" v-model="member.bankNum"></el-input>
                </el-form-item>


                <!--<el-form-item label="注册IP" prop="registerId">
                    <el-input id="registerId" class="inputLine" v-model="member.registerId"></el-input>
                </el-form-item>

                <el-form-item label="登录IP" prop="loginIp">
                    <el-input id="loginIp" class="inputLine" v-model="member.loginIp"></el-input>
                </el-form-item>-->

                <el-form-item label="会员等级" prop="level">
                    <el-select id="level" class="inputLine" v-model="member.level" placeholder="请选择">
                        <el-option
                                v-for="item in level"
                                :key="item.key"
                                :label="item.value"
                                :value="item.key"
                                :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>

                <!--<el-form-item label="访问次数" prop="pageClick">
                    <el-input id="pageClick" class="inputLine" v-model="member.pageClick"></el-input>
                </el-form-item>-->

                <el-form-item>
                    <!--这里save(formName)方法保存，ref别名的member-->
                    <el-button id="submitBtn" type="primary" @click="save('member')">立即创建</el-button>
                    <el-button @click="resetForm('member')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import BigFile from "../../../components/BigFile";

    export default {
        name: "AddMember",
        components: {BigFile},
        props: {
            list: {
                type: Function,
                default: null
            },
        },
        data() {
            let nameValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("姓名不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("姓名长度至少3位"));
                } else {
                    callback();
                }
            }
            let nickNameValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("昵称不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("昵称长度至少3位"));
                } else {
                    callback();
                }
            }
            let iconValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("头像不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("头像长度至少3位"));
                } else {
                    callback();
                }
            }
            let wechatCodeValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("微信二维码不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("微信二维码长度至少3位"));
                } else {
                    callback();
                }
            }
            let mobileValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("手机号不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("手机号长度至少3位"));
                } else {
                    callback();
                }
            }
            let emailValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("邮箱不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("邮箱长度至少3位"));
                } else {
                    callback();
                }
            }
            let passwordValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("密码不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("密码长度至少3位"));
                } else {
                    callback();
                }
            }
            let identityNumValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("身份证号不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("身份证号长度至少3位"));
                } else {
                    callback();
                }
            }
            let provinceValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("省不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("省长度至少3位"));
                } else {
                    callback();
                }
            }
            let cityValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("市不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("市长度至少3位"));
                } else {
                    callback();
                }
            }
            let districtValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("区不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("区长度至少3位"));
                } else {
                    callback();
                }
            }
            let bankNumValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("银行卡号不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("银行卡号长度至少3位"));
                } else {
                    callback();
                }
            }
            let bankCardValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("银行卡不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("银行卡长度至少3位"));
                } else {
                    callback();
                }
            }
            let registerIdValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("注册IP不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("注册IP长度至少3位"));
                } else {
                    callback();
                }
            }
            let mottoValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("座右铭不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("座右铭长度至少3位"));
                } else {
                    callback();
                }
            }

            return {
                message: '这里是更新会员管理表页面',
                member: {
                    uniId: '',
                    name: '',
                    nickName: '',
                    icon: '',
                    wechatCode: '',
                    mobile: '',
                    email: '',
                    password: '',
                    identityNum: '',
                    identityCard: [],
                    province: '',
                    city: '',
                    district: '',
                    bankNum: '',
                    bankCard: '',
                    registerId: '',
                    loginIp: '',
                    level: '',
                    pageClick: '',
                    motto: '',
                    createTime: '',
                    updateTime: '',
                },
                labelPosition: 'left',

                rules: {
                    name: [
                        {validator: nameValidate, trigger: 'blur'}
                    ],
                    /*nickName:[
                        {validator:nickNameValidate,trigger:'blur'}
                    ],
                    icon:[
                        {validator:iconValidate,trigger:'blur'}
                    ],
                    wechatCode:[
                        {validator:wechatCodeValidate,trigger:'blur'}
                    ],*/
                    mobile: [
                        {validator: mobileValidate, trigger: 'blur'}
                    ],
                    /*email:[
                        {validator:emailValidate,trigger:'blur'}
                    ],
                    password:[
                        {validator:passwordValidate,trigger:'blur'}
                    ],
                    identityNum:[
                        {validator:identityNumValidate,trigger:'blur'}
                    ],
                    province:[
                        {validator:provinceValidate,trigger:'blur'}
                    ],
                    city:[
                        {validator:cityValidate,trigger:'blur'}
                    ],
                    district:[
                        {validator:districtValidate,trigger:'blur'}
                    ],
                    bankNum:[
                        {validator:bankNumValidate,trigger:'blur'}
                    ],
                    bankCard:[
                        {validator:bankCardValidate,trigger:'blur'}
                    ],
                    registerId:[
                        {validator:registerIdValidate,trigger:'blur'}
                    ],
                    motto:[
                        {validator:mottoValidate,trigger:'blur'}
                    ],
    */

                },
                //文件上传：封面上传，这里的地址，vue默认搜索public，不需要添加public：../../imgs/BG-WALL.png
                imageUrl: '',
                dynamicTags: ['标签一', '标签二', '标签三'],
                inputVisible: false,
                inputValue: '',
                options: VIDEO_TYPE,
                charge: VIDEO_CHARGE,
                isShow: YES_OR_NO,
                level: LEVEL,
                status: STATUS,
                moduleTypes: MODULE_TYPE,
                SOURCE_USE_TYPE: SOURCE_USE_TYPE,
                //级联选择
                address: [],
                add: [],
                //文件上传
                files: []
            }
        },
        mounted() {
            if (Tool.isNotEmpty(SessionStorage.get(ADD))) {
                this.address = SessionStorage.get(ADD);
            }
            if (this.$route.params.member != null) {
                this.member = this.$route.params.member;
                if (!Tool.isEmpty(this.member.identityCard.toString())) {
                    for (let i = 0; i < this.member.identityCard.length; i++) {
                        this.files = this.member.identityCard;
                    }
                } else {
                    this.files = [];
                }

                if (this.$route.params.add != null) {
                    this.add = this.$route.params.add || [];
                }
                let optionMember = document.getElementById("optionMember");
                let submitBtn = document.getElementById("submitBtn");
                optionMember.innerHTML = '更新会员管理表';
                submitBtn.innerHTML = "立即更新";
            }
        },
        methods: {

            //1.新增会员管理表
            save(formName) {
                let _this = this;
                let responseMsg = '';
                this.member.identityCard = this.files;
                //保存时密码一次加密，服务端二次加密
                this.member.password=hex_md5(this.member.password+KEY);
                //前端校验
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                        this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/member/save', this.member)
                            .then((response) => {
                                let resp = response.data;
                                let responseMsg = resp.responseMsg;
                                if (resp.success) {
                                    this.$router.push("/system/manager/member");
                                    //引入全局变量toast提示
                                    toast.success("保存成功", "bottom-end");
                                } else {
                                    this.$notify({
                                        title: '填写内容错误',
                                        message: responseMsg,
                                        position: "top-right",
                                        offset:300,
                                        type: 'warning'
                                    });
                                }
                            })
                    } else {
                        this.$notify({
                            title: '填写内容错误',
                            message: '请按照提示内容填写正确信息',
                            position: "top-right",
                            offset:300,
                            type: 'warning'
                        });
                        return false;
                    }
                });

            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            //接收文件上传组件传入的resp
            afterUpload(resp) {
                if (resp.success) {
                    this.member.icon = resp.responseData.path;
                }
            },
            afterQrImgUpload(resp) {
                this.member.wechatCode = resp.responseData.path;
            },
            afterbankCardUpload(resp){
                this.member.bankCard = resp.responseData.path;
            },
            afterIDUpload(resp) {
                if (resp.success) {
                    //this.module.picList=resp.responseData.path;
                    let moduleId = this.member.uniId;
                    let picPath = resp.responseData.path;
                    if (!Tool.isEmpty(moduleId)) {
                        this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/member/savePicList',
                            {
                                moduleId: moduleId,
                                picPath: picPath
                            })
                            .then((response) => {
                                let resp = response.data;
                                if (resp.success) {
                                    let pics = [];
                                    for (let i = 0; i < resp.responseData.length; i++) {
                                        pics.push(resp.responseData[i]);
                                    }
                                    this.files = pics;
                                    toast.success("保存成功", "bottom-end");
                                } else {
                                    this.$notify({
                                        title: '保存失败，请联系管理员',
                                        message: resp.responseMsg,
                                        position: "top-right",
                                        type: 'warning'
                                    });
                                }
                            })
                    } else {
                        this.files.push(picPath);
                    }
                }
            },
            removeIDImg(file) {
                let boxMessage = document.querySelectorAll(".el-message-box .el-message-box__content .el-message-box__container .el-message-box__message p");
                for (let i = 0; i < boxMessage.length; i++) {
                    boxMessage[i].style = "word-wrap:break-word";
                }
                this.$confirm('确认删除 【' + file + '】文件？', '删除图片操作', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.files.splice(this.files.indexOf(file), 1);
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消删除'
                    });
                });
            },
            addressChange() {
                this.member.province = "";
                this.member.city = "";
                this.member.district = "";

                let checkedNodes = this.$refs.addressInput.getCheckedNodes()[0];
                let province = checkedNodes.parent.parent.label;
                let provinceId = checkedNodes.parent.parent.data.id;
                let city = checkedNodes.parent.label;
                let cityId = checkedNodes.parent.data.id;
                let district = checkedNodes.label;
                let districtId = checkedNodes.data.id;
                this.member.province = {add: province, id: provinceId};
                this.member.city = {add: city, id: cityId};
                this.member.district = {add: district, id: districtId};
            },
        },
    }
</script>

<style scoped>
    /*顶部line样式*/
    .topNav {

    }

    /deep/ .el-divider__text {
        background-color: #1d7dd6;
        padding: 8px 20px;
    }

    .topLine {
        background-color: #1d7dd6;
    }

    .lineIcon {
        font-size: 22px;
        color: #ffffff;
        position: relative;
        margin-right: 5px;
    }

    .lineTitle {
        position: relative;
        font-size: 16px;
        color: #ffffff;
    }

    /*会员管理表设置导航*/
    .memberSetNav {
        max-width: 400px;
        margin: 5px auto;

    }

    .memberSetNavTile {
        cursor: pointer;
    }

    /*内容区位置*/
    .addContent {
        margin-left: 5%;
        margin-top: 35px;
        margin-right: 5%;
    }

    /deep/ .el-form-item {
        margin-bottom: 5px;
    }

    /*输入行控制*/
    .inputLine {
        max-width: 350px;
        float: left;
    }

    .inputOptionLine {
        min-width: 350px;
        float: left;
    }

    .inputAccountLine {
        max-width: 180px;
        float: left;
    }

    /deep/ .el-input-group__append, .el-input-group__prepend {
        color: white;
        background-color: #ff6f00;
        vertical-align: middle;
        display: table-cell;
        position: relative;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        padding: 0 20px;
        width: 1px;
        white-space: nowrap;
    }

    /*关键字标签*/
    .el-tag + .el-tag {
        margin-left: 10px;
    }

    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }

    .titleLeft {
        float: left;
    }

    /*SEO描述*/
    .textAreaWidth {
        max-width: 400px;
        float: left;
    }

    /*图片上传：取消upload打开的input默认按钮*/
    /deep/ input[type=file] {
        display: block;
    }

    /*错误提示*/
    #employeeTitle {
        float: left;
    }

    /deep/ .el-form-item__error {
        float: left;
        position: relative;
        line-height: 30px;
        margin-left: 10px;
    }

    /*提示框的字符颜色*/
    /deep/ .el-input__prefix, .el-input__suffix {
        color: #44cd3f;
        font-size: 18px;
    }

    /deep/ .el-input__icon {
        color: #44cd3f;
        font-size: 18px;
    }

    /*是否显示*/
    /deep/ .el-switch {
        line-height: 40px;
    }

    /*头像上传：如果没有可删除，picList*/
    .avatar-uploader {
        float: left;
    }

    .avatar-uploader {
        border: 1px dashed #a8a2a2;
        border-radius: 6px;
        cursor: pointer;
        overflow: hidden;
        text-align: center;
    }

    .avatar-uploader:hover {
        border-color: #409EFF;
    }

    .avatar-uploader:hover .avatar-uploader-icon {
        color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    input[type=file] {
        display: block;
    }

    .upload-icon {
        margin-top: -50px;
        margin-bottom: 10px;
        position: relative;
    }

    .upload-icon .upload-icon-box {
        border: 1px solid #cccccc;
        padding: 5px;
        border-radius: 5px;
        overflow: hidden;
    }

    .upload-icon img {
        transition: 1s;
    }

    .upload-icon img:hover {
        transform: scale(1.5);
    }

    .upload-icon img:hover .upload-icon-box {
        border: 1px solid #1d7dd6;
    }

    .upload-file-list {
        margin-bottom: 10px;
        margin-top: -40px;
        margin-left: 13%;
    }

    .upload-file-list .el-image {
        width: 150px;
        float: left;
        padding: 5px;
        border: 1px solid #cccccc;
        margin-right: 5px;
    }

    .upload-file-list .file-image .img-url {
        position: relative;
    }

    .upload-file-list .file-image .img-after {
        position: relative;
        float: left;
        margin-top: 56px;
        margin-left: -37px;
        color: white;
    }

    .upload-file-list .file-image .img-after .img-del {
        padding: 5px;
        border-radius: 0;
        background-color: #e92322;
        border: 1px solid #ffffff;
    }

    .upload-file-list .file-image .img-after .img-del:hover {
        background-color: #f6504f;
    }

    /*微信二维码*/
    .upload-qrcode-icon {
        margin-top: -50px;
        margin-bottom: 5px;
    }

    .uploadQrImg {
        display: block;
    }

    .logoDesc {
        position: absolute;
        display: block;
        color: #1b6d85;
        float: left;
        top: -40px;
        left: 100px;
    }

</style>